<template>
  <div class="routerNav">
    <router-link 
      v-for="(item, index) in router" 
      :key="index" 
      :to="item.path | cparams" 
      tag="div"
      class="router-item"
    >
      {{item.name}}
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'routerNav',
  data() {
    return {
      title: 'routerNav',
      router: this.$router.options.routes,
    }
  },
  filters: {
    cparams(data) {
      if(data.indexOf(':')>=0) {
        let cindex = parseInt(data.indexOf(':'));
        return data.slice(0,cindex) + '55'
      }else {
        return data
      }
    }
  }
}
</script>

<style lang="less" scoped>
.routerNav {
  // position: absolute;
  // z-index: 9;
  // top: 20px;
  // left: 20px;
  width: 100%;
  .router-item {
    display: inline-block;
    margin: 10px;
  }
}
</style>